<template id="child-map">
  <div id="map" :style="style"></div>
</template>

<script>
  export default{
    data(){
      return{
        point:'',
        map:'',
        marker:'',
        style:{
          width:'100%',
          height:'100%'
          //height:this.m.height+'px'//由参数控制高度
        }
      }
    },
    props:['m'],
    watch:{
      m(curVal,oldVal){
        // console.log(curVal,oldVal)
        document.getElementById('l-maptext').innerHTML = '级别：'+this.map.getZoom()+'，经：'+curVal.longitude+'，纬：'+curVal.latitude;
        this.init(curVal);

      }
    },
    methods: {
      // 创建或更新地图
      init(m){
        console.log(m)
        this.map = new BMap.Map("map");
        this.point = new BMap.Point(m.longitude,m.latitude);
        this.map.centerAndZoom(this.point, 15);
        this.marker = new BMap.Marker(this.point);  // 创建标注
        this.map.addOverlay(this.marker);               // 将标注添加到地图中
        this.marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

        this.map.enableScrollWheelZoom(true);

        this.map.addEventListener("zoomend",this.myZoomend);//缩放
        this.map.addEventListener("click",this.attribute);//单击事件
      },
      //显示缩放级别
      myZoomend(){
        document.getElementById('l-maptext').innerHTML = '级别：'+this.map.getZoom();
      },
      //单击事件的更新
       attribute(e){
        // console.log(e);
        var clickPoint={
          longitude:e.point.lng,
          latitude:e.point.lat
        }
        this.map.clearOverlays();
        this.init(clickPoint);
        document.getElementById('l-maptext').innerHTML = '级别：'+this.map.getZoom()+'，经：'+clickPoint.longitude+'，纬：'+clickPoint.latitude;
      }
    },
    //初始化
    mounted(){
      this.init(this.m);
    }
  }
</script>·